<template>
	<view class="content">	
		<button class="btn1" @click="goTo" type="warn" size="default">添加好友</button>
		<view class="searchAndAdd">
			<view class="search">
				<uni-easyinput style='background-color: blue;' v-model="uname" placeholder="请输入好友名"></uni-easyinput>
				<button type="primary" @click="searchFriend" size="default">搜索</button>
			</view>
			
		</view>
		<uni-list style='width: 100%'>
			<uni-list style='width: 100%' :border='true'>
				<uni-list-chat clickable @click="toChat(item.aname,item.apic)"  v-for="item in addfriends" style='width: 100%' :title='item.aname' :note='item.aSign' :avatar='item.apic' :avatar-circle='true'>
					<view style="flex-direction: row;align-items: center;">
						<uni-icons @click.native.stop="modifyName(item.aid)" color="#007aff" size="25" type="compose"></uni-icons>
						<uni-icons @click.native.stop="delFriend(item.aid)" type="clear" size="26" color="red"></uni-icons>
					</view>
				</uni-list-chat>
			</uni-list>
		</uni-list>
		<uni-popup type="dialog" ref="inputDialog">
			<uni-popup-dialog style='flex-direction: column;' ref="pop1" mode='input' title="修改备注" 
			placeholder="请输入备注名" @confirm="diaConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {queryAllUsers,queryAllFriends,delFriends,queryFriendsByNameLike,modifyFriend} from '../../service/index.js'
	export default {
		data() {
			return {
				uname:'',
				addfriends:[],
			}
		},
		onLoad() {
			// 加载好友列表
			this.showfriends()
		},
		methods: {
			async showfriends(){
				let data=await queryAllFriends()
				//console.log(data)
				this.addfriends=data.data
			},
			goTo(){
				uni.navigateTo({
					url:'/pages/friend-add/friend-add'
				})
			},
			async delFriend(aid){
				//console.log(aid)
				let data=await delFriends(aid)
				console.log(data)
				if(data.code==200){
					// 加载好友列表
					this.showfriends()
					uni.showToast({
						title:'删除好友成功',
						icon:'success',
						duration:2000
					})
				}
			},
			// 模糊查询好友
			async searchFriend(){
				let data=await queryFriendsByNameLike(this.uname)
				//console.log(data)
				this.addfriends=data.data
			},
			// 修改备注
			 modifyName(id){
				uni.setStorageSync('friendId',id)
				this.$refs.inputDialog.open('center')
			},
			//确认修改备注
			async diaConfirm(val){
				//console.log(val)//val为弹出对话框输入的值
				let data=await modifyFriend(uni.getStorageSync('friendId'),val)
				console.log(data)
				if(data.code==200){
					// 加载好友列表
					this.showfriends()
					uni.showToast({
						title:'修改备注成功',
						icon:'success',
						duration:2000
					})
					
				}
			},
			toChat(aname,apic){
				uni.navigateTo({
					url:`/pages/chat/chat?aname=${aname}&apic=${apic}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		>.searchAndAdd{
			width: 100%;
			padding: 10px ;
			>.search{
				
				width: 100%;
				justify-content: space-between;
				>button{
					border-radius: 50%;
					margin-left: 20px;
				}
			}
		}
		>.btn1{
			width: 50%;
			margin: 10px;
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
